<template>
  <div class="container_t">
    <div class="containerTop">
      <div class="container">
        <a-image
            width="200"
            :src="$store.state.user.profile?.avatarUrl"
            style="border-radius: 100px"
        />
        <div class="container_tag">
        <span class="container_tag_text">
          <span>{{ $store.state.user.profile?.nickname }}</span>
          <a-tag checkable>Lv 7</a-tag>
        </span>
          <div>用户ID:{{ $store.state.user.userPoint?.userId }}</div>
          <div>所在地区:{{ $store.state.user.profile?.city }}</div>
          <div>个人介绍：暂无介绍</div>
        </div>
      </div>
      <div class="container_center">
        <numberlValue :title="'动态'" :value="value" :start="start"></numberlValue>
        <numberlValue class="container_center_number" :title="'关注'" :value="value"
                      :start="start"></numberlValue>
        <numberlValue :title="'粉丝'" :value="value" :start="start"></numberlValue>

      </div>
      <div>
        <a-button class="buttona" @click="quit">退出登录</a-button>
        <PopUps @determine="onok" ref="PopUpsRef">
          你确定要退出吗
        </PopUps>

      </div>
    </div>
    <a-divider/>
    <div>
      <div style="font-size: 20px;margin: 1rem;cursor: pointer">我喜欢的音乐></div>
      <div class="containerCard">
        <div v-for="(item,index) in liveLsit">
          <card :src="item.coverImgUrl" :description="item.name"
                @click="$router.push( {path: '/detail',query: {id:item.id}})"></card>
          {{ item.backgroundUrl }}
        </div>
      </div>
    </div>
    <div style="font-size: 20px;margin: 1rem;cursor: pointer">我收藏的音乐></div>
    <div class="containerCard">
      <div v-for="(item,index) in collect">
        <card :src="item.coverImgUrl" :description="item.name"
              @click="$router.push( {path: '/detail',query: {id:item.id}})"></card>
        {{ item.backgroundUrl }}
      </div>
    </div>

    <div style="height: 140px"></div>
  </div>
</template>

<script setup>
import {ref} from "vue"
import numberlValue from "~/components/numberlValue.vue"
import card from "~/components/card.vue"
import Card from "../../components/card.vue";
import PopUps from "~/components/popups.vue"
import {getplaylistApi} from "~/commonApi/api"
import {useStore} from "vuex";
import {toast} from "~/uilti/tool.js";
import {useRouter} from "vue-router";

const start = ref(true)
const title = ref('粉丝')
const value = ref(50)
const visible = ref(false)
const PopUpsRef = ref(null)

//用户ID

//获取用户歌单
const liveLsit = ref([])
const collect = ref([])
let id = localStorage.getItem('id')
const GetsongList = async () => {

  const res = await getplaylistApi(id)
  liveLsit.value = res.playlist.filter(o => o.subscribed == false)
  collect.value = res.playlist.filter(o => o.subscribed == true)
}
GetsongList()


// GetsongList(id)


const quit = () => {
  PopUpsRef.value.open()
}
const store = useStore()
const router = useRouter()
const onok = () => {
  store.dispatch('loginout').then(res => {
    // console.log(res,'res')
    toast('退出成功', 'success')
    router.push('/pagesFrist')
  }).finally(() => {
    PopUpsRef.value.close()
  })

}


</script>

<style scoped lang="scss">
.container_t {
  overflow-y: scroll;
  height: 100vh;
}

.containerTop {
  display: flex;
  justify-content: space-between;


  .container {
    display: flex;
    align-items: center;

    .container_tag {
      text-align: center;

      div {
        margin: 1rem;
      }

      .container_tag_text {
        font-size: 2rem;
        margin-left: 2rem;
      }
    }


  }

  .buttona {
    margin: 2rem 2rem 0 0;
  }

  .container_center {
    display: flex;
    align-items: center;

    .container_center_number {
      margin: 0 2rem;
    }
  }

}

.containerCard {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(5, 20%);
}

.text {
  font-size: 1rem;
  font-weight: bold;
}
</style>